<template>
  <div>
    <Modal v-model="innerVisible" title="修改" width="350px" @on-cancel="handleCancel">
      <Form ref="dataForm" :model="dataForm">
        <FormItem prop="bookName" label="书名">
          <Input type="text" v-model="dataForm.bookName" placeholder="请输入" clearable style="width: 200px" />
        </FormItem>
        <FormItem prop="author" label="作者">
          <Input type="text" v-model="dataForm.author" placeholder="请输入" clearable style="width: 200px" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="handleCancel">取消</Button>
        <Button type="primary" @click="handleSubmit" :loading="submitting">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getByBookId, updateBook } from '@/api/book'

export default {
  props: {
    visible: {
      type: Boolean,
      require: true,
    },
    id: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      innerVisible: this.visible,
      dataForm: {
        bookName: '',
        author: '',
      },
      submitting: false,
    }
  },
  watch: {
    visible(newValue) {
      if (newValue) {
        this.innerVisible = newValue
        this.getDataForm()
      }
    },
  },
  methods: {
    async getDataForm() {
      const res = await getByBookId({ id: this.id })
      this.dataForm = res.data
    },
    async handleSubmit() {
      // console.log(this.dataForm)
      this.submitting = true
      const res = await updateBook(this.dataForm)
      if (res.code === 0) {
        this.$Message.success('操作成功')
      } else {
        this.$Message.error('操作失败：' + res.message)
      }
      this.submitting = false
      this.handleCancel()
    },
    handleCancel() {
      this.$emit('close')
    },
  },
}
</script>

<style scoped></style>